<!-- 头部 -->
<template>
  <div :class="['navigation', { navigation_back: show || width <= 768 }]">
    <main>
      <img v-if="!show && width >= 768" src="@/assets/navigation/1.png" />
      <img v-if="show || width <= 768" src="@/assets/navigation/2.png" />
      <div class="details">
        <div class="list display_none">
          <p @click="$method.skip('/home')">
            {{ i18n.navigation.home }}
            <span class="blue" v-if="$route.name == '/home'"></span>
          </p>
          <p @click="$method.skip('/aboutUs')">
            {{ i18n.navigation.About }}
            <span class="blue" v-if="$route.name == '/aboutUs'"></span>
          </p>
          <p @click="$method.skip('/journalism')">
            {{ i18n.navigation.journalism }}
            <span class="blue" v-if="$route.name == '/journalism'"></span>
          </p>
          <p @click="$method.skip('/innovate')">
            {{ i18n.navigation.innovate }}
            <span class="blue" v-if="$route.name == '/innovate'"></span>
          </p>
          <p @click="$method.skip('/factory')">
            {{ i18n.navigation.factory }}
            <span class="blue" v-if="$route.name == '/factory'"></span>
          </p>
          <p @click="$method.skip('/product')">
            {{ i18n.navigation.product }}
            <span class="blue" v-if="$route.name == '/product'"></span>
          </p>
          <p @click="$method.skip('/career')">
            {{ i18n.navigation.career }}
            <span class="blue" v-if="$route.name == '/career'"></span>
          </p>
          <p @click="$method.skip('/college')">
            {{ i18n.navigation.college }}
            <span class="blue" v-if="$route.name == '/college'"></span>
          </p>
          <p @click="$method.skip('/contact')">
            {{ i18n.navigation.contact }}
            <span class="blue" v-if="$route.name == '/contact'"></span>
          </p>
        </div>
        <div class="search">
          <span @click="taglangfun">
            <img v-if="!show && width >= 768" src="@/assets/navigation/3.png" />
            <img v-if="show || width <= 768" src="@/assets/navigation/5.png" />
            {{ i18n.navigation.language }}
          </span>
          <p class="input_back">
            <img src="@/assets/navigation/4.png" />
            <input
              @keyup.enter="handleEnter"
              v-model="keyword"
              type="text"
              :placeholder="i18n.navigation.search"
            />
          </p>
          <i @click="folds" class="el-icon-s-unfold display_block"></i>
        </div>
      </div>
    </main>
    <aside :class="{ fold: fold }" v-if="width <= 768">
      <p @click="skip('/home')">
        <span v-if="$route.name == '/home'"></span>
        {{ i18n.navigation.home }}
      </p>
      <p @click="skip('/aboutUs')">
        <span v-if="$route.name == '/aboutUs'"></span>
        {{ i18n.navigation.About }}
      </p>
      <p @click="skip('/journalism')">
        <span v-if="$route.name == '/journalism'"></span>
        {{ i18n.navigation.journalism }}
      </p>
      <p @click="skip('/innovate')">
        <span v-if="$route.name == '/innovate'"></span>
        {{ i18n.navigation.innovate }}
      </p>
      <p @click="skip('/factory')">
        <span v-if="$route.name == '/factory'"></span>
        {{ i18n.navigation.factory }}
      </p>
      <p @click="skip('/product')">
        <span v-if="$route.name == '/product'"></span>
        {{ i18n.navigation.product }}
      </p>
      <p @click="skip('/career')">
        <span v-if="$route.name == '/career'"></span>
        {{ i18n.navigation.career }}
      </p>
      <p @click="skip('/college')">
        <span v-if="$route.name == '/college'"></span>
        {{ i18n.navigation.college }}
      </p>
      <p @click="skip('/contact')">
        <span v-if="$route.name == '/contact'"></span>
        {{ i18n.navigation.contact }}
      </p>
    </aside>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import bus from "@/config/emit";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      fold: false,
      keyword: "",
    };
  },
  props: ["show", "width"],
  //计算属性 类似于data概念
  computed: {
    i18n() {
      return this.$t("message");
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleEnter() {
      if (this.$route.name == "/journalism") {
        bus.$emit("search", this.keyword);
      }
      this.$method.skip("/journalism", { keyword: this.keyword });
      this.keyword = "";
    },
    skip(name, data) {
      if (!this.fold) return;
      this.fold = false;
      this.$router.push({
        name,
        params: data,
      });
    },
    folds() {
      this.fold = !this.fold;
    },
    taglangfun() {
      let locale = this._i18n.locale == "zh-CN" ? "en-US" : "zh-CN";
      this._i18n.locale = locale;
      window.localStorage.setItem("locale", locale);
      bus.$emit("lang", true);
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，激活
  deactivated() {}, //如果页面有keep-alive缓存功能，非激活
};
</script>
<style lang="less">
.navigation {
  width: 100%;
  height: 1rem;
  padding: 0 1.375rem;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  transition: all 0.3s;
  z-index: 999;

  & > .fold {
    & > p {
      line-height: 30px;
      opacity: 1;
    }
  }

  & > aside {
    width: 100%;
    height: 0;
    position: absolute;
    left: 0;
    bottom: 0;

    & > p {
      background-color: #fff;
      font-size: 15px;
      line-height: 0px;
      padding: 0 20px;
      box-sizing: border-box;
      overflow: hidden;
      transition: all 0.3s;
      opacity: 0;
      border-bottom: 1px solid #f3f3f3;
      position: relative;

      & > span {
        position: absolute;
        width: 4px;
        height: 20px;
        border-radius: 4px;
        background-color: #00ccff;
        top: 50%;
        left: 10px;
        transform: translateY(-50%);
      }
    }
  }

  & > main {
    width: 100%;
    height: 100%;
    display: flex;
    color: #fff;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #d8d8d8;

    & > .details {
      height: 100%;
      display: flex;
      align-items: center;
      font-size: 0.225rem;

      & > .list {
        display: flex;
        height: 100%;
        font-size: 0.225rem;

        & > p {
          height: 100%;
          margin: 0 0.225rem;
          display: flex;
          align-items: center;
          position: relative;

          & > span {
            width: 100%;
            height: 0.05rem;
            border-radius: 0.05rem;
            background-color: #fff;
            position: absolute;
            bottom: 0;
          }
        }
      }

      & > .search {
        display: flex;
        align-items: center;

        & > i {
          display: none;
          font-size: 14px;
          padding: 5px;
          border-radius: 50%;
          border: 1px solid #333;
          margin-left: 10px;
          color: #333;
        }

        & > p {
          width: 2.075rem;
          height: 0.55rem;
          border-radius: 0.275rem;
          background-color: #ffffff22;
          display: flex;
          align-items: center;
          padding: 0 0.1625rem;
          box-sizing: border-box;

          & > input {
            width: 1.35rem;
            height: 100%;
            font-size: 0.225rem;
            background-color: #ffffff00;
          }

          & > img {
            width: 0.25rem;
            margin-right: 0.1375rem;
          }
        }

        & > span {
          display: flex;
          align-items: center;
          margin-right: 0.575rem;

          & > img {
            width: 0.2rem;
            margin-right: 0.15rem;
          }
        }
      }
    }

    & > img {
      height: 0.625rem;
    }
  }
}

.navigation_back {
  background-color: #fff;

  .blue {
    background-color: #00ccff !important;
  }

  .input_back {
    background-color: #33333310 !important;
  }

  & > main {
    border-bottom: 0;
    color: #333;
  }
}

@media screen and (max-width: 768px) {
  .display_none {
    display: none !important;
  }

  .display_block {
    display: block !important;
  }

  .navigation {
    height: 4.4rem;
    position: sticky;

    & > main {
      & > .details {
        & > .search {
          font-size: 1.4rem;

          & > p {
            width: 14rem;
            height: 2.5rem;
            border-radius: 1.25rem;
            padding: 0 1rem;

            & > input {
              width: 9rem;
              height: 100%;
              font-size: 1.2rem;
            }

            & > img {
              width: 1.4rem;
              margin-right: 1rem;
            }
          }

          & > span {
            margin-right: 1.5rem;
            font-size: 1.2rem;

            & > img {
              width: 1.4rem;
              min-width: none;
              margin-right: 1rem;
            }
          }
        }
      }

      & > img {
        width: 30%;
        height: auto;
      }
    }
  }
}
</style>